<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>3dmol UI</title>
  <style>
    .viewer_3Dmoljs {
      border-bottom: 1px solid black;
      box-sizing: border-box;
    }

    html,
    body {
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <script src="../../build/3Dmol.js"></script>
  <script src="../../build/3Dmol.ui.js"></script>
  <!-- Different divs to test out different input to ui -->
  <!-- <div style="height: 100vh;" class='viewer_3Dmoljs' data-pdb='2POR' data-backgroundcolor='0xffffff' data-ui='true'></div> -->
  <!-- <div style="height: 100vh;" id='new_canvas_test'></div> -->
  <!-- <div style="height: 100vh;" class='viewer_3Dmoljs' data-pdb='2POR' data-backgroundcolor='0xffffff' data-ui='true' data-select='{"chain": "A"}' data-style='{ "cartoon" : { "color" : "spectrum"} }' data-surface="VDW"></div> -->
  <!-- <div style="height: 100vh;" class='viewer_3Dmoljs' data-pdb='2POR' data-backgroundcolor='0xffffff' data-ui='true' data-select='{"chain": "A"}' data-style='{ "cartoon" : { "color" : "spectrum"} }'></div> -->
  <div style="height: 100vh;" class='viewer_3Dmoljs' data-pdb='2POR' data-backgroundcolor='0xffffff' data-ui='true'
    data-select='{"elem": "C", "hetflag" : true, "byres" : true}' data-style='{"sphere":{"radius": 0.6}, "stick" : {}}'
    data-select1='{"chain" : "A"}' data-style1='{ "cartoon" : { "color" : "spectrum"}}' data-select2='{"chain" : "A"}'
    data-style2='{ "cartoon" : { "color" : "spectrum"}}' data-select3='{"elem" : "C"}'
    data-style3='{ "sphere" : { "radius" : "0.2"}}' data-surface3="opacity:.7;color:white"></div>
  <!-- <div style="height: 100vh;" class='viewer_3Dmoljs' data-pdb='2POR' data-backgroundcolor='0xffffff' data-ui='true' data-select='{"chain" : "A", "byres" : true}' data-style='{"sphere":{"radius": 0.4}, "stick" : {}}' data-select1='{"chain" : "A", "byres" : true}' data-style1='{ "cartoon" : { "color" : "spectrum"}}'></div> -->
  <!-- <div style="height: 100vh;" class='viewer_3Dmoljs' data-pdb='2POR' data-backgroundcolor='0xffffff' data-ui='true' data-select='{"chain": "A", "hetflag" : true}' data-style='{"sphere":{"radius": 0.4}, "stick" : {}}'></div> -->
</body>

</html>